<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tests — Base</title>
  <link rel="stylesheet" href="../styles.css" />
</head>

<body>
  <main>
    <h1>Tests — Base</h1>
    <button class="link-like" data-a11y-dialog-show="my-dialog">Open the dialog window</button>
    <button class="link-like" data-a11y-dialog-show="something-else">Open the dialog window</button>
  </main>

  <div class="dialog" data-a11y-dialog="my-dialog" aria-labelledby="my-dialog-title">
    <div class="dialog-overlay" data-a11y-dialog-hide></div>
    <div class="dialog-content" role="document">
      <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>

      <h1 id="my-dialog-title">Dialog title</h1>

      <form>
        <label for="email">Email (required)
          <button type="button" popovertarget="email-tip" aria-describedby="email-tip">!</button>
        </label>
        <p id="email-tip" popover>
          Make sure your email address is correct as we’ll send you a confirmation email that you’ll need to read to
          activate your account.
        </p>
        <input type="email" name="EMAIL" id="email" placeholder="john.doe@gmail.com" required>
        <button type="submit" name="button">Sign up</button>
      </form>

      <button type="button" id="move-focus-outside">Move focus outside</button>
    </div>
  </div>

  <div data-a11y-dialog-ignore-focus-trap>
    <button type="button" id="focus-me">Focus me</button>
  </div>

  <script src="./a11y-dialog.js"></script>
  <script>
    document.querySelector('#move-focus-outside').addEventListener('click', () => {
      document.querySelector('#focus-me').focus()
    })
  </script>
</body>

</html>
